<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <title>京东网</title>
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <img src="../images/header.png" alt="">
    </div>
    <div id="logo">
        <div class="warpper">
            <div class="img">
                <img src="../images/logo.png" alt="">
            </div>
            <div class="right">
                <input type="text" placeholder="请输入您想搜索的商品"><button>搜索</button>
            </div>
        </div>
    </div>
    <!-- 主体区域 -->
    <div id="section">
        <div class="warpper">
            <div class="section_header">
                <p>全部商品</p>
                <div class="right">
                    <span>配送地址：</span>
                    <span>省：</span><select name="sheng">
                        <option value="请选择省">请选择省</option>
                    </select>
                    <span>市：</span><select name="city">
                        <option value="请选择市">请选择市</option>
                    </select>
                    <span>区/县：</span><select name="area">
                        <option value="请选择区/县">请选择区/县</option>
                    </select>
                </div>
            </div>
            <!-- center -->
            <div class="center_center">
                <div class="header1">
                    <ul>
                        <li>
                            <input type="checkbox" name="quan">全选
                        </li>
                        <li>商品</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>小计</li>
                        <li>操作</li>
                    </ul>
                </div>
                <div class="gouwuche">
                    <!-- <ul>
                        <li>
                            <input type="checkbox" name="xuan">
                        </li>
                        <li>
                            <img src="../images/01.jpg" alt="">
                            <p>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</p>
                        </li>
                        <li>￥<span>4223.00</span></li>
                        <li>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                        </li>
                        <li>￥<span>4223.00</span></li>
                        <li><span>删除</span></li>
                    </ul> -->
                    <ul>
                        <li>
                            <input type="checkbox" name="xuan">
                        </li>
                        <li>
                            <img src="../images/02.jpg" alt="">
                            <p>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</p>
                        </li>
                        <li>￥<span>138.00</span></li>
                        <li>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                        </li>
                        <li>￥<span>138.00</span></li>
                        <li><span>删除</span></li>
                    </ul>
                    <ul>
                        <li>
                            <input type="checkbox" name="xuan">
                        </li>
                        <li>
                            <img src="../images/03.jpg" alt="">
                            <p>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</p>
                        </li>
                        <li>￥<span>265.00</span></li>
                        <li>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                        </li>
                        <li>￥<span>256.00</span></li>
                        <li><span>删除</span></li>
                    </ul>
                    <ul>
                        <li>
                            <input type="checkbox" name="xuan">
                        </li>
                        <li>
                            <img src="../images/04.jpg" alt="">
                            <p>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</p>
                        </li>
                        <li>￥<span>300.00</span></li>
                        <li>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                        </li>
                        <li>￥<span>300.00</span></li>
                        <li><span>删除</span></li>
                    </ul>
                </div>
                <div class="quanxuan">
                    <ul>
                        <li>
                            <input type="checkbox" name="quan">全选
                        </li>
                        <li><span>删除选中的商品</span></li>
                        <li><span>清理购物车</span></li>
                        <li>已选择<span class="shuliang">0</span>件商品</li>
                        <li>
                            总价：￥<span class="zongjia">0.00</span>
                        </li>
                        <li>去结算</li>
                    </ul>
                </div>
            </div>
            <!-- center_footer -->
            <div class="center_footer">
                <div class="one">
                    <input type="button" name="left" value="<">
                    <input type="button" name="right" value=">">
                    <p>猜你喜欢</p>
                    <div class="big_box1">
                        <div class="box1">
                            <dl>
                                <dt>
                                    <img src="../images/05.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>4223.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/06.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>29.90</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/07.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>139.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/08.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>69.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                        </div>
                    </div>
                    <!-- box2 -->
                    <div class="big_box2">
                        <div class="box1">
                            <dl>
                                <dt>
                                    <img src="../images/09.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>520.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/10.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>19.90</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/11.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>950.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/12.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>348.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- footer2 -->
            <div class="center_footer">
                <div class="one">
                    <input type="button" name="left1" value="<">
                    <input type="button" name="right1" value=">">
                    <p>随手购</p>
                    <div class="big_box1">
                        <div class="box1">
                            <dl>
                                <dt>
                                    <img src="../images/13.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>12.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/14.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>10.90</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/15.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>12.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/16.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>69.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                        </div>
                    </div>
                    <!-- box2 -->
                    <div class="big_box2">
                        <div class="box1">
                            <dl>
                                <dt>
                                    <img src="../images/17.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>360.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/18.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>8.90</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/19.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>59.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="../images/20.jpg" alt="">
                                </dt>
                                <dd>
                                    <h2>欧达摄像机4K专业直播摄影机手持数码DV录像机高清电影机电商直播家用</h2>
                                    <p>￥<span>29.00</span></p>
                                </dd>
                                <dd class="dd2">加入购物车</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div id="footer">
        <img src="../images/footer.png" alt="">
    </div>

    <script>
        //创建数据
        var ol = [{
            name: "贵州省", citys: [{
                name: "贵阳市", areas: ["花溪区", "观山湖区", '南明区', '白云区']
            }, {
                name: "六盘水市", areas: ["水城县", "盘州市", '六枝特区']
            }, {
                name: "遵义市", areas: ["红花岗区", '正安县', '习水县']
            }, {
                name: "安顺市", areas: ["平坝区", "西秀区", '普定县']
            }, {
                name: "毕节市", areas: ["大方县", "黔西县", '织金县', '纳雍县']
            }]
        },
        {
            name: "广东省", citys: [{
                name: "广州市", areas: ["白云区", "天河区", '海珠区', '南沙区']
            }, {
                name: "深圳市", areas: ["福田区", "南山区", '龙岗区', '光明区']
            }, {
                name: "珠海市", areas: ["香洲区", '金湾区', '斗门区']
            }, {
                name: "佛山市", areas: ["南海区", "高明区", '三水区', '顺德区']
            }, {
                name: "茂名市", areas: ["茂南区", "电白区", '信宜市', '化州市']
            }]
        }, {
            name: "浙江省", citys: [{
                name: "杭州市", areas: ["桐庐县", "淳安县", '建德市', '临安市']
            }, {
                name: "宁波市", areas: ["象山县", "宁海县", '余姚市', '奉化市']
            }, {
                name: "温州市", areas: ["洞头县", "永嘉县", '平阳县', '文成县']
            }, {
                name: "嘉兴市", areas: ["嘉善县", "海阳县", '海盐县', '平湖市']
            }, {
                name: "绍兴市", areas: ["绍兴县", "新昌乡", '上虞市', '嵊州市']
            }]
        }, {
            name: "四川省", citys: [{
                name: "成都市", areas: ["大邑县", "金堂县", '双流县', '新津县']
            }, {
                name: "达州市", areas: ["达县", "大竹县", '开江县', '宣汉县']
            }, {
                name: "遵义市", areas: ["红花岗区", "", '正安县', '习水县']
            }, {
                name: "巴中市", areas: ["南江县", "平昌县", '通江县']
            }, {
                name: "绵阳市", areas: ["安县", "平武县", '三台乡', '盐亭县']
            }]
        }]
        //获取操作对象
        var sheng = document.querySelector("[name=sheng]")
        var citys = document.querySelector("[name=city]")
        var areas = document.querySelector("[name=area]")
        // console.log(sheng,citys,areas)

        //给省份下拉框添加选项
        //遍历数组
        for (var i = 0; i < ol.length; i++) {
            //创建下拉框添加option选项
            var opt = document.createElement("option")
            //给当前option添加value值
            opt.value = ol[i].name
            // console.log(opt)
            //给当前选项添加文本内容
            opt.innerHTML = ol[i].name
            // console.log(opt)
            //把文本追加到省份下拉框中
            sheng.appendChild(opt)
        }

        //给省份下拉框添加onchange事件
        sheng.onchange = function () {
            //清空城市下拉框的选项
            citys.options.length = 1
            //清空区县下拉框的选项
            areas.options.length = 1
            //获取当前被选中的省份的value
            var s1 = this.value
            // console.log(s1)
            //遍历数组
            for (var i = 0; i < ol.length; i++) {
                // console.log(ol[i])
                // 判断当前遍历出来的省份是否等于选中的省份
                // console.log(ol[i])
                if (ol[i].name == s1) {
                    //遍历当前省份下对应的市
                    for (var j = 0; j < ol[i].citys.length; j++) {
                        // console.log(o1[i])
                        //创建选项
                        var opt = document.createElement('option')
                        //获取当前城市
                        var c1 = ol[i].citys[j].name
                        // console.log(c1)
                        //给选项添加value属性值
                        opt.value = c1
                        //给选项添加文本
                        opt.innerHTML = c1
                        //把当前选项追加到城市的下拉框中
                        citys.appendChild(opt)
                    }
                }
            }
        }

        //给城市下拉框添加onchange事件
        citys.onchange = function () {
            //清空区县下拉框的选项
            areas.options.length = 1
            //获取被选中的省份的value值
            var s1 = sheng.value
            // console.log(s1)
            //获取被选中的城市的value值
            var c1 = this.value
            // console.log(c1)
            //遍历省份
            for (var i = 0; i < ol.length; i++) {
                console.log(ol[i])
                // 判断遍历出来的省份是否等于被选中的省份
                if (ol[i].name == s1) {
                    //遍历当前省份下的城市
                    for (var j = 0; j < ol[i].citys.length; j++) {
                        // console.log(ol[i].citys[j])
                        //判断当前遍历出来的城市是否等于备选中的城市
                        if (ol[i].citys[j].name == c1) {
                            //遍历当前城市下的区县
                            for (var k = 0; k < ol[i].citys[j].areas.length; k++) {
                                console.log(ol[i].citys[j].areas[k])
                                //创建选项
                                var opt = document.createElement("option")
                                //获取当前区县
                                var a1 = ol[i].citys[j].areas[k]
                                //给区县添加value值
                                opt.value = a1
                                //给区县添加文本
                                opt.innerHTML = a1
                                //把当前选项添加到区县下拉框
                                areas.appendChild(opt)
                            }
                        }
                    }
                }
            }
        }
    </script>
    <script src="../js/index.js"></script>
</body>

</html>